<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div
          style="
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 10px;
          "
        >
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span style="margin-left: 5px" class="primary">{{
            $route.meta.title
          }}</span>
        </div>
        <div
          style="
            display: flex;
            justify-content: flex-end;
            width: 100%;
            align-items: baseline;
          "
        >
          <div style="width: 40%; display: flex; justify-content: space-around">
        <el-select v-model="paymentStatus" clearable   placeholder="支付状态" style="width:200px">
            <el-option  label="未支付" value="0" ></el-option>
            <el-option  label="已支付" value="1" ></el-option>
            </el-select>
        <el-select v-model="payScene"  clearable  placeholder="支付场景" style="width:200px">
            <el-option  label="场内" value="1" ></el-option>
            <el-option  label="出口" value="2" ></el-option>
            </el-select>
          </div>
          <el-button
            style=" margin-top: 5px"
            size="small"
            type="primary"
            @click="parkingRecordlist"
            >查询</el-button
          >
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="parkingData"
        border
        stripe
        v-loadMore="[payLoads, 'paking-list']"
        :height="curHeight"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="车牌号" width="180" align="center" prop="carNo">
        </el-table-column>
        <el-table-column
          label="付款金额"
          width="180"
          align="center"
          prop="payedMoney"
        >
        </el-table-column>
        <el-table-column label="入场时间" align="center">
          <template slot-scope="scope">
            <span>{{format(scope.row.enterTime)}}</span>
            <!-- <span>{{scope.row.enterTime|dateFormatter}}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.paymentStatus == 0?'info':'success'">
              <span>{{scope.row.paymentStatus==0?'未支付':'.已支付' }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="支付场景" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.payScene == 1?'':'success'">
              <span>{{scope.row.payScene==0?'场内':'场外' }}</span>
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="parkingRecordlist"
      ></pagination>
    </el-footer>
    </div>
  </el-container>
</template>

<script>
import loadMore from "@/utils/loadMore.js";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { parkingRecordlist } from "@/api/parking";
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
export default {
  name: "parking-details",
  directives: { permission, loadMore },
  activated() {
    this.payLoads = new Date().getTime();
  },
  data() {
    return {
        paymentStatus:"",
        payScene:'',
      parkingRecordId: "",
      payLoads: "",
      parkingData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      queryType: true,
      query: {
        parkKey: "",
        name: "",
      },
      keyword: {
        name: "",
        parkKey: "",
      },
      sysPostOpenForm: {
        id: "",
        status: "",
      },
      curHeight: null,
    };
  },
  components: { Pagination },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  created() {
    this.parkingRecordId = this.$route.query.id;
    this.parkingRecordlist();
  },
  methods: {
    add0(m){return m<10?'0'+m:m },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (y +"-" +this.add0(m) + "-" +this.add0(d) +" " +this.add0(h) +":" + this.add0(mm) + ":" +this.add0(s));
    },
    parkingRecordlist() {
      const _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      params.append("parkingId", _this.parkingRecordId);
      params.append("paymentStatus", _this.paymentStatus);
      params.append("payScene", _this.payScene);
      parkingRecordlist(params).then((res) => {
        console.log(res);
        this.parkingData = res.data.data;
        this.total=res.data.total
      });
    },

    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 266; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220; //减去页面上固定高度height
      }
    },
    queryClick() {
      this.keyword = this.query;
      this.pageNum = 1;
      //   this.loadparking();
    },
  },
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
